<template>
	<div style="background-color: #fff; border-radius: 10px; text-align: center;">
		<div class="img-responsive">
			<!-- <img class="up-img" src="../assets/images/userCard01.jpg"> -->
			<img class="up-img" src="https://i.loli.net/2021/08/02/iU3tur7CflHwQLq.jpg">
		</div>
		<div style="height: 50px;">
			<img class="avatar" src="../assets/images/avatar.png" alt="">
		</div>
		<p style="margin:10px 0px; font-size: 18px;">萌萌哒丶冬冬	</p>
		<div class="user-info-card">
			<div class="user-article">
				<p class="article-number">202</p>
				<p class="article-txt">文章</p>     
			</div>
			<div class="user-article">
				<p class="article-number">105</p>
				<p class="article-txt">日记</p>
			</div>
			<div class="user-article">
				<p class="article-number">1012</p>
				<p class="article-txt">评论</p>
			</div>
		</div>
		<div class="user-link">
			<!-- <router-link to="/blog"><Icon type="logo-github" size="40"/></router-link> -->
			<a href="https://gitee.com/WanderDongDong" target="_blank"><Icon type="logo-github" size="40"/></a>
			<a href="https://store.steampowered.com/" target="_blank"><Icon type="logo-steam" size="40"/></a>
			<a href="https://xueqiu.com/P/ZH2414730" target="_blank"><Icon type="md-disc" size="40"/></a>
			<!-- <a href=""><Icon type="ios-contact-outline" size="40"/></a> -->
		</div>
		<div style="height: 30px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'UserCard'
	}
</script>

<style scoped>
.up-img{
	width: 100%;
}

.img-responsive{
	max-width: 100%;
	height: 0;
	padding-bottom: 52%;
	overflow: hidden;
	border-radius: 10px 10px 0px 0px;
}

.avatar{
    left: 133px;
    margin: -50px 0 0;
    width: 90px;
    height: 90px;
    border: 4px solid hsla(0,0%,100%,.6);
    border-radius: 50%;
    transition: all .2s;
    cursor: pointer;
}

.avatar:hover{
	width: 100px;
	height: 100px;
}

.user-article{
	width: 33.3%;
	float: left;
}

.article-number{
	color: #2d8cf0;
	font-size: 16px;
	font-weight: bold;
}

.article-txt{
	font-size: 16px;
}

.user-link{
	margin-top: 75px;
}

.user-link a{
	margin-left: 20px;
}
</style>